<!DOCTYPE html>
<html>
<head>
<title>分配权限</title>
#include("/admin/_common/head.html")
<!-- 样 式 文 件 -->
</head>
<!-- 代 码 结 构 -->
<body class="pear-container">
    <form class="layui-form" lay-filter="module-form" onsubmit="return false;">
        <input type="hidden" name="id" value="#(bean.id??)">
        <input type="hidden" name="deptIds">
        
        <div class="layui-card">
            <div class="layui-card-header">基本信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" disabled value="#(bean.name)" />
                    </div>
                    <label class="layui-form-label">权限字符串</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" disabled value="#(bean.code)" />
                    </div>
                </div>
            </div>
            <div class="layui-card-header">数据权限</div>
            <div class="layui-card-body">
		        <div class="layui-form-item">
		            <label class="layui-form-label required">数据范围</label>
		            <div class="layui-input-inline">
		                <select name="dataScope" lay-verify="required" lay-filter="bean-dataScope">
		                    <option value="">-- 请选择 --</option>
		                #DICTS(type="role_data_scope")#for(item : dicts)
		                    <option value="#(item.value)"#if(item.value == bean.dataScope??) selected#end>#(item.label)</option>
		                #end#end
		                </select>
		            </div>
		            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i>&nbsp;特殊情况下，设置为“自定数据权限”</div>
		        </div>
		        <div id="bean-table-div"#if(bean.dataScope?? != 'CUSTOM') style="display: none;"#end>
		        	<div id="beans-tree"></div>
		        </div>
            </div>
        </div>
        <div class="bottom" style="display: none;">
            <div class="button-container">
                <button type="submit" onclick="window.checkData();" class="pear-btn pear-btn-primary pear-btn-xs" lay-submit="" lay-filter="data-save" id="data-save">
                    <i class="layui-icon layui-icon-ok"></i> 提交
                </button>
            </div>
        </div>
    </form>
<!-- 资 源 引 入 -->
#include("/admin/_common/foot.html")
#include("/admin/_common/form_style.html")
<script>
layui.use(['form', 'jquery', 'common', 'table'], function() {
    var $ = layui.jquery;
    var form = layui.form;
    var common = layui.common;
    var treeTable = layui.treeTable;
    var tree = layui.tree;
    
    /*
     * 刷新表格
     */
    window.renderTree = () => {
    	var data = window.getData();
    	
        tree.render({
            elem: '#beans-tree',
            id: 'beans-tree-1',
            data: data,
            method: "get",
            showCheckbox: true,  // 是否显示复选框
            accordion: true
        });

        treeFn.selectChecked('beans-tree-1', data, window.getCheckedIds());
    };
    
    window.getData = () => {
        var data = [];
        $.ajax({
            url: "#CTX()/admin/system/dept/tree",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                data = result;
            }
        });
        return data;
    };
    
    window.getCheckedIds = () => {
    	var data = [];
        $.ajax({
            url: "#CTX()/admin/system/dept/queryByRole?roleId=#(bean.id??)",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                for (var i = 0; i < result.length; i++){
                	data.push(result[i].id)
                }
            }
        });
        return data;
    };

    window.renderTree();
    
    window.checkData = () => {
        $("[name='deptIds']").val(treeFn.getCheckedIds("beans-tree-1").join());
    };

    form.on('select(bean-dataScope)', function(data){
    	if (data.value=='CUSTOM'){
    		$("#bean-table-div").show();
    	} else {
    		$("#bean-table-div").hide();
    	}
    });
});
</script>
</body>
</html>
